/*
* 卡包
* @Author: MG
* @Date: 2019.5.8
 * @Last Modified by: ljb
 * @Last Modified time: 2019-09-23 09:22:23
*/
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
  @import "~src/assets/css/common.less";

  .v-user-card {
    background: rgba(245, 245, 245, 1);
    // margin: 9*@rem-per-px 9*@rem-per-px 9*@rem-per-px 15*@rem-per-px
    width: 100%;
    //   height: 100%;
    .main {
      // position: absolute;
      // top: 86*@rem-per-px;
      // bottom: 0;
      // right: 0;
      // left: 0;
      padding: 20 * @rem-per-px 30 * @rem-per-px 0 * @rem-per-px 30 * @rem-per-px;

      .rectangle {
        margin-bottom: 20 * @rem-per-px;
        position: relative;
        z-index: 1;
        width: 100%;

        //   height: 200 * @rem-per-px;
        //   border: 1 * @rem-per-px solid rgba(255, 255, 255, 1);
        //   background: rgba(255, 255, 255, 1);
        // background:url(src/assets/media/img/user/card_bg);
        background: url(../../../assets/media/img/user/card_bg.png) center no-repeat;
        background-size: cover;
      }

      .fixed::after {
        content: "";
        display: block;
        clear: both;
      }

      .float {
        float: left;
      }

      .cardLeft {
        width: 548 * @rem-per-px;
        height: 100%;
        padding: 20 * @rem-per-px 0 * @rem-per-px 20 * @rem-per-px 20 *
        @rem-per-px;
        box-sizing: border-box;

        // border-right:1px dashed rgba(187, 187, 187, 1);
        .productImg {
          width: 160 * @rem-per-px;
          height: 160 * @rem-per-px;
          margin-right: 10 * @rem-per-px;
          background-size: cover;
          // border-radius: 50%;
          // background-color: #EDEDED ;
          // margin: 46*@rem-per-px 42*@rem-per-px 44*@rem-per-px 22*@rem-per-px;
        }

        .productCash {
          width: 354 * @rem-per-px;
          height: 84 * @rem-per-px;
          font-size: 70 * @rem-per-px;
          font-family: Impact;
          font-weight: 400;
          line-height: 77 * @rem-per-px;
          color: rgba(51, 51, 51, 1);
        }

        .productTitle {
          width: 354 * @rem-per-px;
          height: 25 * @rem-per-px;
          font-size: 18 * @rem-per-px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 30 * @rem-per-px;
          color: rgba(252, 138, 180, 1);
        }

        .productTime {
          width: 354 * @rem-per-px;
          height: 25 * @rem-per-px;
          font-size: 18 * @rem-per-px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 30 * @rem-per-px;
          color: rgba(252, 138, 180, 1);
        }

        .productAddr {
          width: 340 * @rem-per-px;
          height: 34 * @rem-per-px;
          font-size: 12 * @rem-per-px;
          font-family: "PingFang SC";
          font-weight: 400;
          line-height: 36 * @rem-per-px;
          color: rgba(204, 204, 204, 1);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .cardRight {
        width: 142 * @rem-per-px;
        height: 100%;
        // padding: 46*@rem-per-px 40*@rem-per-px 20*@rem-per-px 50*@rem-per-px;
        box-sizing: border-box;
        //   background: rgba(252, 138, 180, 1);
        // .productTitle{
        // 	font-size: 24*@rem-per-px;
        // 	width: 100%;
        // 	text-align: justify;
        // 	 line-height: 34*@rem-per-px;
        // 	 box-sizing: border-box;
        // 	 padding-right: 18*@rem-per-px;
        // }
        // .productContent{
        // 	font-size: 28*@rem-per-px;
        // 	margin-top: 26*@rem-per-px;
        // 	line-height: 40*@rem-per-px;
        // }
        .productQuit {
          font-size: 36 * @rem-per-px;
          // margin-top: 36*@rem-per-px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 200 * @rem-per-px;
        }
      }

      .addused {
        background: url(../../../assets/media/img/user/card_bg_used.png) center no-repeat;
        background-size: cover;
      }

      .mapList {
        width: 750 * @rem-per-px;
        box-sizing: border-box !important;
        position: absolute;
        left: 0;
        top: 358 * @rem-per-px;

        box-sizing: content-box;
        border: 2 * @rem-per-px solid rgba(187, 187, 187, 1);
        height: 256 * @rem-per-px;
        padding: 100 * @rem-per-px 0 * @rem-per-px 28 * @rem-per-px 30 *
        @rem-per-px;

        .mapLeft {
          width: 96 * @rem-per-px;
          height: 96 * @rem-per-px;
          background-color: #ededed;
        }

        .mapMid {
          margin-left: 20 * @rem-per-px;
          height: 102 * @rem-per-px;
          width: 470 * @rem-per-px;
          border-right: 2 * @rem-per-px solid rgba(187, 187, 187, 1);

          .storeName {
            font-size: 39 * @rem-per-px;
            line-height: 52 * @rem-per-px;
          }

          .address {
            font-size: 28 * @rem-per-px;
            line-height: 40 * @rem-per-px;
          }
        }

        .mapRight {
          text-align: right;
          margin-left: 28 * @rem-per-px;

          .mapLogo {
            font-size: 28 * @rem-per-px;
            line-height: 42 * @rem-per-px;
          }

          .mapRighttext {
            font-size: 28 * @rem-per-px;
            line-height: 42 * @rem-per-px;
            margin-top: 12 * @rem-per-px;
          }
        }
      }
    }
  }

  .win_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 750 * @rem-per-px;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    opacity: 0.48;
    z-index: 2;
  }

  .window {
    position: fixed;
    width: 576 * @rem-per-px;
    height: 296 * @rem-per-px;
    background: rgba(255, 255, 255, 1);
    border-radius: 20 * @rem-per-px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-top: 423 * @rem-per-px;
    z-index: 2;

    .win_content {
      margin: 0 auto;
      margin-top: 56 * @rem-per-px;
      width: 496 * @rem-per-px;
      height: 152 * @rem-per-px;
      font-size: 32 * @rem-per-px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 32 * @rem-per-px;
      color: rgba(35, 41, 49, 1);
      text-align: left;
    }

    .win_button {
      width: 576 * @rem-per-px;
      height: 88 * @rem-per-px;
      border-top: 1px solid rgba(176, 176, 176, 1);

      .cancel {
        float: left;
        width: 287 * @rem-per-px;
        height: 88 * @rem-per-px;
        font-size: 28 * @rem-per-px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 88 * @rem-per-px;
        color: rgba(35, 41, 49, 1);
        opacity: 0.8;
        text-align: center;
        border-right: 1 * @rem-per-px solid rgba(176, 176, 176, 1);
      }

      .ok {
        float: left;
        width: 288 * @rem-per-px;
        height: 88 * @rem-per-px;
        font-size: 28 * @rem-per-px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 88 * @rem-per-px;
        color: rgba(252, 138, 180, 1);
        opacity: 1;
        text-align: center;
      }
    }
  }

  .win_button::after {
    content: "";
    display: "block";
    clear: both;
  }
</style>
<template>
  <div class="v-user-card">
    <back v-if="!is_wechat" />
    <div :class="{iswechat: is_wechat}"
         class="main">
      <div
        v-for="(cards,index) in coupon_list"
        class="rectangle fixed"
        :key="cards.id"
        @click="destroy(index)"
        :class="{'addused':coupon_list[index].is_used==1}"
      >
        <div class="float cardLeft clearfix">
          <div
            :style="{backgroundImage:'url('+cards.coupon_ticket.thumb+')'} "
            class="productImg float"
          />
          <div class="productContent float">
            <div class="productCash">￥{{ cards.coupon_ticket.discount }}</div>
            <div class="productTitle">{{ cards.coupon_ticket.desc }}</div>
            <div
              class="productTime"
            >{{ cards.started_at.slice(0,10).replace(/-/g, '/') }} - {{ cards.ended_at.slice(0,10).replace(/-/g, '/') }}
            </div>
            <div class="productAddr">N5馆，N5D02展位</div>
          </div>
        </div>
        <div class="float cardRight">
          <div class="productQuit">{{ coupon_list[index].is_used ? "已使用" : "核销" }}</div>
        </div>
      </div>
      <!-- <div class="mapList fixed">
        <div class="mapLeft float"/>
        <div class="mapMid float">
          <div class="storeName">屈臣氏</div>
          <div class="address">广州市天河中山大道西2号104铺</div>
        </div>
        <div class="mapRight float">
          <div class="mapLogo">地图</div>
          <div class="mapRighttext">地图</div>
        </div>
      </div>-->
    </div>
    <div v-show="open_win"
         class="win_bg" />
    <div v-show="open_win"
         class="window">
      <div class="win_content">请与商家确认后再核销，是否继续核销？</div>
      <div class="win_button">
        <div class="cancel"
             @click="offWin">取消
        </div>
        <div class="ok"
             @click="cancelWin">确定
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import API_LIST from 'src/API_LIST'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Back from 'src/views/component/back'
  // import { dateFormat } from 'vux';
  import {formaturl} from 'src/utils/utils'
  import {isWechat, parseQueryString} from 'src/utils/helper'
  import productItem from 'src/views/component/product-item'
  import card_bg from 'src/assets/media/img/user/card_bg'
  import card_bg_used from 'src/assets/media/img/user/card_bg_used'

  export default {
    name: 'Mycard',

    components: {
      back: Back,
    },
    computed: {

      ...mapGetters('userInfo', [
        'getUserInfo',
        'getAppid',
      ]),

      ...mapGetters('lang', [
        'getLang',
      ]),

    },
    data() {
      return {
        is_wechat: isWechat(),
        coupon_list: [],
        open_win: false,
        cancel_id: 0,
        // cancel_code: '',
      }
    },
    created() {
      this.$http
        .get(`${API_LIST.COUPON}?openid=${this.getUserInfo.openid}&appid=${this.getAppid}`,)
        .then(({data}) => {
          this.coupon_list = data.coupon_cards
        })
    },
    methods: {
      // 点击列表弹窗
      destroy(index) {
        if (this.coupon_list[index].is_used == 1) {
          return
        }
        this.open_win = true
        this.cancel_id = this.coupon_list[index].id
      },
      offWin() {
        this.open_win = false
      },
      cancelWin() {
        this.$http
          .post(`${API_LIST.COUPON}/${this.cancel_id}`, {
            openid: this.getUserInfo.openid,
            appid: this.getAppid,
            _method: 'PATCH',
          })
          .then((res) => {
            // 成功核销后再请求更新列表
            this.$http
              .get(`${API_LIST.COUPON}?openid=${this.getUserInfo.openid}&appid=${this.getAppid}`,)
              .then(({data}) => {
                this.coupon_list = data.coupon_cards
              })
          })
        this.open_win = false
      },
    },
  }
</script>

